<template>
  <div>
    <!-- 荣誉 -->
    <!-- nav -->
    <whiteNav></whiteNav>
    <!-- 大logo -->
    <div><img src="../assets/image/荣誉banner.png" alt="" /></div>
    <!-- 企业资质 -->
    <div class="enterprise">
      <div class="enterprise-title text-center">
        {{ $t("enterprisetitle") }}
      </div>
      <div class="enterprise-subtitle text-center">
        {{ $t("enterprisesubtitle") }}
      </div>
      <div class="enterprise-imagelist">
        <div class="imgshow-item">
          <img src="../assets/image/证书.png" alt="" />
        </div>
        <div class="imgshow-item">
          <img src="../assets/image/证书.png" alt="" />
        </div>
        <div class="imgshow-item">
          <img src="../assets/image/证书.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 荣誉 -->
    <div class="honors">
      <div class="honors-title text-center">{{ $t("honorstitle") }}</div>
      <div class="honors-subtitle text-center">{{ $t("honorssubtitle") }}</div>
      <div class="honors-msglist">
        <div class="honors-item">
          <img src="../assets/image/感谢信.png" alt="" />
        </div>
        <div class="honors-item">
          <img src="../assets/image/感谢信.png" alt="" />
        </div>
        <div class="honors-item">
          <img src="../assets/image/感谢信.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 企业软著 -->
    <div class="enterprise-soft">
      <div class="soft-title text-center">{{ $t("softtitle") }}</div>
      <div class="soft-subtitle text-center">{{ $t("softsubtitle") }}</div>
      <!-- 下方资质证书 -->
      <div class="soft-bookslist">
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
        <div class="soft-item">
          <img src="../assets/image/软著.png" alt="" />
        </div>
      </div>
    </div>
    <!-- links -->
    <links></links>
    <!-- footer -->
    <myfooter></myfooter>
    <!-- 侧边栏返回顶部 -->
    <returnTop></returnTop>
  </div>
</template>

<script>
import whiteNav from "../components/whiteNav.vue";
import myfooter from "../components/myFooter.vue";
import links from "../components/links.vue";
import returnTop from "../components/returnTop.vue";

export default {
  components: {
    whiteNav,
    myfooter,
    links,
    returnTop,
  },
  name: "honor",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// 移动端
@media (max-width: 768px) {
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共用
  .dflex {
    display: flex;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .mt-20 {
    margin-top: 10px;
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  //   企业资质
  .enterprise {
    padding: 40px 0;
    .enterprise-title {
      color: #000;
      font-size: 26px;
    }
    .enterprise-imagelist {
      padding-top: 30px;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .imgshow-item {
        width: 32.5%;
      }
    }
  }
  //   荣誉
  .honors {
    padding-top: 30px;
    background: #f0f4f7;
    .honors-title {
      font-size: 26px;
      color: #000;
    }
    .honors-msglist {
      padding: 60px 0;
      margin: 0 auto;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .honors-item {
        width: 32.5%;
      }
    }
  }
  //   企业软著
  .enterprise-soft {
    padding-top: 60px;
    .soft-title {
      font-size: 26px;
      color: #000;
    }
    .soft-bookslist {
      padding: 60px 0;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .soft-item {
        width: 32.5%;
        border: 20px solid #f7f8fa;
        margin-bottom: 20px;
      }
    }

    .soft-bookslist:after {
      content: "";
      flex: auto;
    }
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
